<template>
<div class="update">
	<el-form ref="saveFormRef" :model="saveForm" :rules="saveRules" class="update-form" label-width="80px">
	  <h2 class="title">帖子发布</h2>
	  <el-form-item prop="title" label="标题">
		<el-input v-model="saveForm.title" maxlength="50" show-word-limit/>
	  </el-form-item>
	  <el-form-item prop="coverImage" label="图片">
		<el-upload
			class="upload-demo"
			:action="uploadAction"
			:on-success="uploadSuccess"
			accept="image/*"
			with-credentials
			:limit="1"
			list-type="picture"
		  >
			<el-button type="primary">点击上传</el-button>
			<template #tip>
			  <div class="el-upload__tip">
				jpg/png 图片不能大于 500kb
			  </div>
			</template>
		  </el-upload>
	  </el-form-item>
	  <el-form-item prop="content" label="内容">
        <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="saveForm.content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
          />
      </div>
	  </el-form-item>
	  <el-form-item style="width: 100%;">
		<el-button type="primary" @click="doSave" style="width: 100%;">发布</el-button>
	  </el-form-item>
	</el-form>
</div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, shallowRef, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import { baseUrl } from "../global/index.js"
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'

const { proxy } = getCurrentInstance()
let formLabelWidth = ref(80)
//表单相关
const saveFormRef = ref(null)
const saveForm = reactive({})

const doSave = () => {
  saveFormRef.value.validate(async (valid) => {
    if (!valid) {
      return
    }
    let params = Object.assign({}, saveForm)
    let result = await proxy.axios.post('forum/save', params)
	if (!result) {
		return
	}
    proxy.msg.success("发布成功");
	proxy.router.push('/home')
  })
}

//配置富文本编辑器
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const mode = ref('default')
const toolbarConfig = {}
const editorConfig = { 
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      server: 'http://localhost:8082/web/image/editor/upload',
      fieldName: 'file',
      allowedFileTypes: ['image/*'],
      withCredentials: true,
      base64LimitSize: 100 * 1024
    }
  }
}

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const saveRules = {
  coverImage: [
    {
      required: true,
      message: "请上传图片",
    },
  ],
  title: [
    {
      required: true,
      message: "请输入标题",
    },
  ],
  content: [
    {
      required: true,
      message: "请输入内容",
    },
  ]
}

//图片上传
const uploadAction = ref(baseUrl + 'image/upload')
const uploadSuccess = (response, uploadFile, uploadFiles) => {
	if (response.code !== 0) {
		this.msg.error(response.msg)
	} else {
		saveForm.coverImage = response.data
	}
}

</script>

<style lang="scss" scoped>
.update {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.update-form {
  border-radius: 6px;
  background: #ffffff;
  width: 60%;
  padding: 30px 30px 10px 30px;
  .el-input {
	height: 38px;
	input {
	  height: 38px;
	}
  }
  .input-icon {
	height: 39px;
	width: 14px;
	margin-left: 2px;
  }
}
.update-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.update-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
	cursor: pointer;
	vertical-align: middle;
  }
}
.update-code-img {
  height: 38px;
}
</style>
